import { useState, useEffect } from 'react';
import './index.less';
import { Table, Typography, Space, Button } from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';
import { Dropdown, Form, Input, Select, DatePicker } from 'antd';
import axios from 'axios';
import { DownOutlined } from '@ant-design/icons';
const { Search } = Input;
const { RangePicker } = DatePicker;

const items = [
  {
    key: '1',
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.antgroup.com"
      >
        打印设置
      </a>
    ),
  },
  {
    key: '2',
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.antgroup.com"
      >
        打印列表
      </a>
    ),
  },
  {
    key: '3',
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.antgroup.com"
      >
        打印单据
      </a>
    ),
  },
];

export default function IndexPage(props) {
  // console.log(props);
  const [form] = Form.useForm();
  // 被选中数据的id
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  // 被选中的所有数据
  const [pathData, setPathData] = useState({});

  // 列表
  const [data, setData] = useState([]);
  useEffect(() => {
    axios.get('http://127.0.0.1:7777/prepay/list').then((res) => {
      setData(res.data.dataList);
    });
  }, []);
  // 查找
  const onFinish = (values) => {
    axios
      .get(
        `http://127.0.0.1:7777/prepay/list?relation=${values.relation}&gender=${values.gender}&handle=${values.handle}&username=${values.username}&bank=${values.bank}`,
      )
      .then((res) => {
        setData(res.data.dataList);
      });

    // console.log(values, 66);
  };
  // 搜索
  const onSearch = (values) => {
    console.log(values);
  };
  // 列表结构
  const columns = [
    {
      title: '序号',
      dataIndex: 'key',
      width: 80,
      render: (col, item, index: number) => {
        return <p>{index + 1}</p>;
      },
    },
    {
      title: '关联项目',
      dataIndex: 'relation',
      render: (col) => {
        return <a>{col}</a>;
      },
    },
    {
      title: '客户名称',
      dataIndex: 'username',
      render: (col) => {
        return <a>{col}</a>;
      },
    },
    {
      title: '收款账户名称',
      dataIndex: 'bank',
    },
    {
      title: '预收金额',
      dataIndex: 'amount',
    },
    {
      title: '预收日期',
      dataIndex: 'collect',
    },
    {
      title: '是否开票',
      dataIndex: 'gender',
    },
    {
      title: '预收人员',
      dataIndex: 'handle',
      render: (col) => {
        return <a>{col}</a>;
      },
    },
  ];
  // 添加
  const onAdd = () => {
    props.history.push('/home/finance/collection/add');
  };
  // 删除
  const onDel = () => {
    selectedRowKeys.forEach((item) => {
      console.log(item);
      axios.delete(`http://127.0.0.1:7777/prepay/del/${item}`).then((res) => {
        axios.get('http://127.0.0.1:7777/prepay/list').then((res) => {
          setData(res.data.dataList);
        });
      });
    });
  };
  // 修改
  const onEdit = () => {
    props.history.push({
      pathname: '/home/finance/collection/edit',
      state: { pathData: pathData },
    });
  };

  function summary(currentData) {
    return (
      <Table.Summary.Row>
        <Table.Summary.Cell>合计</Table.Summary.Cell>
        <Table.Summary.Cell>
          <Typography.Text type="success" bold>
            {currentData.reduce((prev, next) => prev + next.amount, 0)}
          </Typography.Text>
        </Table.Summary.Cell>
      </Table.Summary.Row>
    );
  }

  const [pagination, setPagination] = useState({
    sizeCanChange: true,
    showTotal: true,
    total: 96,
    pageSize: 10,
    current: 1,
    pageSizeChangeResetCurrent: true,
  });

  function onChangeTable(pagination) {
    const { current, pageSize } = pagination;
    console.log(current, pageSize);
    setPagination((pagination) => ({ ...pagination, current, pageSize }));
  }

  return (
    <div className="container">
      <div className="buts">
        <button
          onClick={() => {
            onAdd();
          }}
        >
          新增
        </button>
        <button
          className="but"
          onClick={() => {
            onEdit();
          }}
        >
          修改
        </button>
        <button
          className="but"
          onClick={() => {
            onDel();
          }}
        >
          删除
        </button>
        <button className="but">过滤</button>
        <button className="but">还原</button>
        <button className="but">
          <Dropdown
            menu={{
              items,
            }}
          >
            <div onClick={(e) => e.preventDefault()}>
              <Space>
                打印
                <DownOutlined />
              </Space>
            </div>
          </Dropdown>
        </button>
        <button className="but">导入</button>
        <button className="but">导出</button>
        <button className="but">查看日历</button>
      </div>
      <Form
        onFinish={onFinish}
        form={form}
        name="control-hooks"
        initialValues={{
          remember: true,
          gender: '',
          bank: '',
        }}
      >
        <Form.Item
          label="关联项目："
          name="relation"
          style={{ display: 'inline-block', marginLeft: '20px' }}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="是否开票："
          name="gender"
          style={{ display: 'inline-block', marginLeft: '20px' }}
        >
          <Select style={{ width: 200 }}>
            <Select.Option value="">全部</Select.Option>
            <Select.Option value="不开发票">不开发票</Select.Option>
            <Select.Option value="销售时开发票">销售时开发票</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item
          label="经手人："
          name="handle"
          style={{ display: 'inline-block', marginLeft: '20px' }}
        >
          <Search placeholder="请输入" onSearch={onSearch} />
        </Form.Item>
        <Form.Item
          label="客户名称："
          name="username"
          style={{ display: 'inline-block', marginLeft: '20px' }}
        >
          <Search placeholder="请输入" onSearch={onSearch} />
        </Form.Item>
        <Form.Item
          label="预收日期："
          name="collect"
          style={{ display: 'inline-block', marginLeft: '20px' }}
        >
          <RangePicker />
        </Form.Item>

        <Form.Item
          label="银行账户："
          name="bank"
          style={{ display: 'inline-block', marginLeft: '20px' }}
        >
          <Select style={{ width: 200 }}>
            <Select.Option value="">全部</Select.Option>
            <Select.Option value="中国建设银行">中国建设银行</Select.Option>
            <Select.Option value="中国农业银行">中国农业银行</Select.Option>
            <Select.Option value="中国银行">中国银行</Select.Option>
          </Select>
        </Form.Item>

        <Button
          style={{
            marginLeft: '20px',
            color: 'rgb(12, 33, 50)',
            background: 'linear-gradient(#e7effb, #f5faff)',
          }}
          type="primary"
          htmlType="submit"
        >
          查询
        </Button>
      </Form>
      <h2>预收款列表</h2>
      <Table
        rowKey="_id"
        columns={columns}
        data={data}
        pagination={pagination}
        summary={summary}
        onChange={onChangeTable}
        stripe={true}
        rowSelection={{
          type: 'checkbox',
          selectedRowKeys,
          onChange: (selectedRowKeys, selectedRows) => {
            console.log('onChange:', selectedRowKeys, selectedRows);
            setSelectedRowKeys(selectedRowKeys);
          },
          onSelect: (selected, record, selectedRows) => {
            console.log('onSelect:', record);
            setPathData(record);
          },
        }}
      />
    </div>
  );
}
